<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航 -->
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white shadow-lg mr-3">
                    <i class="fas fa-baby"></i>
                </div>
                <h1 class="text-xl font-bold text-gray-900">宝宝成长助手</h1>
            </div>
            <div class="flex items-center">
                <div class="icon-btn mr-2">
                    <i class="fas fa-bell text-gray-600"></i>
                </div>
                <div class="w-8 h-8 bg-gray-200 rounded-full overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="用户头像" class="w-full h-full object-cover">
                </div>
            </div>
        </div>
        
        <!-- 宝宝信息卡片 -->
        <div class="card bg-gradient-to-r from-blue-50 to-indigo-50 border-none mb-6 fade-in">
            <div class="flex items-center">
                <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center overflow-hidden mr-4">
                    <img src="https://images.unsplash.com/photo-1588615419966-0c0f3a9add85?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="宝宝照片" class="w-full h-full object-cover">
                </div>
                <div>
                    <h2 class="text-lg font-bold text-gray-900">小明</h2>
                    <p class="text-sm text-gray-600">11个月20天 · 男 · 2023年6月15日</p>
                </div>
            </div>
            
            <div class="mt-4 grid grid-cols-3 gap-3">
                <div class="text-center py-2 bg-white rounded-lg shadow-sm">
                    <p class="text-xs text-gray-500">当前身高</p>
                    <p class="text-lg font-bold text-blue-600">75.5<span class="text-sm">cm</span></p>
                </div>
                <div class="text-center py-2 bg-white rounded-lg shadow-sm">
                    <p class="text-xs text-gray-500">当前体重</p>
                    <p class="text-lg font-bold text-pink-600">9.2<span class="text-sm">kg</span></p>
                </div>
                <div class="text-center py-2 bg-white rounded-lg shadow-sm">
                    <p class="text-xs text-gray-500">生日倒计时</p>
                    <p class="text-lg font-bold text-amber-600">10<span class="text-sm">天</span></p>
                </div>
            </div>
        </div>
        
        <!-- 主要功能卡片 -->
        <h3 class="section-header">功能</h3>
        <div class="grid grid-cols-2 gap-4 fade-in" style="animation-delay: 0.1s">
            <!-- 日期记录功能 -->
            <div class="data-card data-card-blue">
                <div class="flex items-center mb-2">
                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">纪念日记录</h3>
                </div>
                <p class="text-gray-600 text-xs mb-3">记录特殊日子，查看时间间隔</p>
                <div class="mt-auto">
                    <button class="bg-blue-50 text-blue-600 py-1.5 px-3 rounded-full text-xs font-medium hover:bg-blue-100 transition-colors">
                        立即查看 <i class="fas fa-chevron-right ml-1"></i>
                    </button>
                </div>
            </div>
            
            <!-- 宝宝生长记录 -->
            <div class="data-card data-card-pink">
                <div class="flex items-center mb-2">
                    <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 mr-3">
                        <i class="fas fa-baby"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">生长记录</h3>
                </div>
                <p class="text-gray-600 text-xs mb-3">记录身高体重，查看生长曲线</p>
                <div class="mt-auto">
                    <button class="bg-pink-50 text-pink-600 py-1.5 px-3 rounded-full text-xs font-medium hover:bg-pink-100 transition-colors">
                        立即查看 <i class="fas fa-chevron-right ml-1"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 最近记录的卡片 -->
        <div class="mt-6 fade-in" style="animation-delay: 0.2s">
            <div class="flex justify-between items-center mb-4">
                <h2 class="section-header mb-0">最近记录</h2>
                <a href="#" class="text-blue-600 text-sm font-medium">查看全部</a>
            </div>
            
            <div class="card">
                <div class="list-item">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
                            <i class="fas fa-birthday-cake text-sm"></i>
                        </div>
                        <div>
                            <div class="list-label">宝宝出生日</div>
                            <div class="text-xs text-gray-500">2023年6月15日</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-green-600 font-semibold">11个月20天</div>
                        <div class="text-xs text-gray-500">距今</div>
                    </div>
                </div>
                
                <div class="list-item">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                            <i class="fas fa-ruler text-sm"></i>
                        </div>
                        <div>
                            <div class="list-label">最新身高</div>
                            <div class="text-xs text-gray-500">2024年5月25日</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-blue-600 font-semibold">75.5 cm</div>
                        <div class="text-xs text-gray-500">第50百分位</div>
                    </div>
                </div>
                
                <div class="list-item">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 mr-3">
                            <i class="fas fa-weight text-sm"></i>
                        </div>
                        <div>
                            <div class="list-label">最新体重</div>
                            <div class="text-xs text-gray-500">2024年5月25日</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-pink-600 font-semibold">9.2 kg</div>
                        <div class="text-xs text-gray-500">第45百分位</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 健康提示卡片 -->
        <div class="mt-6 fade-in" style="animation-delay: 0.3s">
            <div class="card bg-gradient-to-r from-amber-50 to-orange-50 border-none">
                <div class="flex items-start">
                    <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 mr-3 mt-1">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-900 mb-2">健康提示</h3>
                        <p class="text-gray-700 text-sm mb-3">小明已经11个月大了，是时候考虑添加更多种类的辅食了。推荐尝试增加蛋白质来源，如鱼肉和豆腐。</p>
                        <div class="flex">
                            <button class="text-xs bg-white text-amber-600 px-3 py-1.5 rounded-full shadow-sm font-medium">
                                阅读更多
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item active">
            <i class="tab-icon fas fa-home"></i>
            <span>首页</span>
        </div>
        <div class="tab-item">
            <i class="tab-icon fas fa-calendar-alt"></i>
            <span>日期</span>
        </div>
        <div class="tab-item">
            <i class="tab-icon fas fa-chart-line"></i>
            <span>生长</span>
        </div>
        <div class="tab-item">
            <i class="tab-icon fas fa-cog"></i>
            <span>设置</span>
        </div>
    </div>
</body>
</html> 